<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // ---------------------------------------------  后端返回的原数据(需要递归遍历处理)
    const arr1 = [
      { name: '总裁办', manager: '曹操', pid: '', id: 1 },
      { name: '董事会', manager: '曹丕', pid: 1, id: 11 },
      { name: '秘书部', manager: '张三', pid: 1, id: 12 },
      { name: '秘书部1', manager: '张三', pid: 12, id: 121 },
      { name: '行政部', manager: '刘备', pid: '', id: 2 },
      { name: '人事部', manager: '孙权', pid: '', id: 3 }
    ]
    // 封装一个函数实现转换操作（递归）
    // 2. 设置一个递归方法 参数1是接收传来的数组arr1 参数2是接收判断条件''
    function translateData(list, pid) {
  // 3. 设置一个存入的数组
      const treeData = []
      // 4. 自己设计算法做转换(进行循环遍历筛选 筛选为'' 条件的数据  当 pid为''时候 把其单独拿出去 出去其他数据)
      list.forEach(item => {
  // 5. 设置判断条件 如果pid是空 那么都被forEach筛选出去 只留下pid存在的内容
        if (item.pid === pid) {
          // 5. 查找该元素的子元素，如果找到子元素后，以children属性方式添加到对象里面(携带其id值)
          const childList = translateData(list, item.id) 
          if (childList && childList.length > 0) {
            // 6. 找到了子元素()
            item.children = childList
          }
          treeData.push(item)
        }
      })
      return treeData
    }

// 1. 给方法设置参数 参数1是要遍历的数组 参数2是筛选的条件
    const ret = translateData(arr1, '')
  console.log(ret);
//---------------------------------------- 遍历后的数据
    const arr = [
      {
        name: '总裁办',
        manager: '曹操',
        children: [
          { name: '董事会', manager: '曹丕' },
          { name: '秘书部', manager: '张三',
        children: [
         {name: "秘书部1", manager: "张三"}
        ]}
        ]
      },
      { name: '行政部', manager: '刘备' },
      { name: '人事部', manager: '孙权' }
    ]
  </script>
</body>

</html>
